<template>
	<div class="addVideo">
		<el-dialog
			:title="`${type}信息模版`"
			:visible.sync="dialogVisible"
			width="600px"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			custom-class="custom-dialog"
		>
			<el-form
				ref="forms"
				size="small"
				:model="forms"
				:rules="rules"
				label-width="140px"
				label-position="right"
			>
				<el-form-item label="标题：" prop="msg_title">
					<el-input
						v-model="forms.msg_title"
						placeholder="请输入标题"
						clearable
						maxlength="50"
						show-word-limit
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="消息内容：" prop="msg_conent">
					<el-input
						v-model="forms.msg_conent"
						placeholder="请输入消息内容"
						clearable
						type="textarea"
						maxlength="100"
						show-word-limit
						resize="none"
						:autosize="{ minRows: 4 }"
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item>
					<el-alert type="warning" :closable="false">
						<section slot="title">
							*消息内容有效值为：
							<span v-for="item in options.placeholder" :key="item.key">
								{{ item.key }}:{{ item.value }}；
							</span>
						</section>
					</el-alert>
				</el-form-item>
				<el-form-item label="发送时机" prop="send_moment">
					<el-select v-model="forms.send_moment" placeholder="请选择" style="width: 100%">
						<el-option
							:label="item"
							:value="index"
							v-for="(item, index) in options.send_moment"
							:key="item"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="模版CODE" prop="temp_code">
					<el-input
						v-model="forms.temp_code"
						placeholder="请输入模版CODE"
						clearable
						style="width: 100%"
					/>
				</el-form-item>
				<el-form-item label="关联赛事" prop="race_id">
					<el-select
						v-model="forms.race_id"
						placeholder="请选择"
						style="width: 100%"
						filterable
						clearable
					>
						<el-option
							:label="item.race_name"
							:value="item.race_id"
							v-for="item in tableData"
							:key="'race' + item.race_id"
						/>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button style="margin-right: 5px" @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveVideos">保存</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import { getMessageInfo, addMessage, editMessage, optionsMessage } from '@/api/message.js'
	import { getList } from '@/api/competition-manage'
	export default {
		name: 'AddMessage',
		data() {
			return {
				dialogVisible: false,
				disabled: false,
				forms: {
					msg_title: '',
					msg_conent: '',
					send_moment: '',
					temp_code: '',
					race_id: ''
				},
				rules: {
					msg_title: [{ required: true, message: '请输入标题', trigger: 'change' }],
					msg_conent: [{ required: true, message: '请输入', trigger: 'change' }],
					temp_code: [{ required: true, message: '请输入模版CODE', trigger: 'change' }],
					send_moment: [{ required: true, message: '请选择', trigger: 'change' }],
					race_id: [{ required: true, message: '请选择赛事ID', trigger: 'change' }]
				},
				type: '',
				info: {},
				options: {
					placeholder: [],
					send_moment: []
				},
				tableData: []
			}
		},
		computed: {
			...mapGetters(['token', 'userInfo'])
		},
		created() {
			this.getOptions()
			this.loadRaceData()
		},
		methods: {
			async initData(type, info = {}) {
				this.type = type
				if (info.msg_id) {
					await this.getDetailInfo(info.msg_id)
					info = this.info
				}
				this.forms = {
					msg_id: info.msg_id || '',
					msg_title: info.msg_title || '',
					msg_conent: info.msg_conent || '',
					send_moment: info.send_moment || '',
					temp_code: info.temp_code || '',
					race_id: info.race_id || ''
				}
				this.dialogVisible = true
				this.$nextTick(() => {
					this.$refs.forms.clearValidate()
				})
			},
			async getOptions() {
				try {
					const res = await optionsMessage({})
					if (res.data.placeholder) {
						let arr = []
						for (let key in res.data.placeholder) {
							arr.push({ key: key, value: res.data.placeholder[key] })
						}
						res.data.placeholder = arr
					}
					console.log(res.data)
					this.options = res.data
				} catch (e) {
					console.log(e)
				}
			},
			async getDetailInfo(info_id) {
				const loading = this.$loading({
					lock: true,
					text: '数据加载中,请稍等~',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				})
				try {
					const res = await getMessageInfo({ msg_id: info_id })
					this.info = res.data
					loading.close()
				} catch (e) {
					loading.close()
					console.log(e)
				}
			},
			// 保存
			async saveVideos() {
				this.$refs.forms.validate(async valid => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '数据提交中~'
						})
						const func = this.forms.msg_id ? editMessage(this.forms) : addMessage(this.forms)
						Promise.all([func])
							.then(res => {
								this.$message.success(`${this.type}模版信息成功！`)
								this.dialogVisible = false
								this.$parent.loadData()
							})
							.finally(() => loading.close())
					} else {
						this.$message.warning('请完善信息后提交！')
					}
				})
			},
			async loadRaceData() {
				try {
					const res = await getList({
						page_no: 1,
						page_size: 500
					})
					this.tableData = res.data.lists
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		::v-deep {
			.el-dialog .el-dialog__body {
				padding-bottom: 20px;
			}
			.el-form .el-form-item {
				margin-bottom: 18px;
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
</style>
